<template>
  <k-view class="liner-text">
    <k-text class="liner-text-title">回测结果说明</k-text>
    <k-view :class="['desc', ellipsis && 'clamp']" v-if="desc" ref="desc">
      <k-view ref="describe" class="desc-text">{{ desc }}</k-view>
      <k-view :class="['right-desc', !ellipsis && 'down']" @click="showMore">
        <k-text class="ell" v-if="ellipsis">...</k-text>
        <k-view :class="['arrow', !ellipsis && 'reverse']">{{ ellipsis ? '展开' : '收起' }}</k-view>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
export default {
  data() {
    return {
      ellipsis: true,
      desc: '基于健康诊断理论体系构建模型，调仓周期设置为季频调仓，财报披露截止日调仓卖出，下个交易日调仓买入，组合权重按等权分配，滑点设为0.5%，手续费万分之二。通过实证检验，健康指数全市场排名前30、50、100、200 以及分行业前5 的股票收益都明显高于大盘，其中优选50 和优选100 的策略收益相比较高，在2020年10月至2022年10月期间，超额收益分别达到35.4%及33.8%，该回测曲线为健康指数优选50收益曲线；',
    };
  },
  methods: {
    showMore() {
      this.ellipsis = !this.ellipsis;
    },
  },
};
</script>

<style lang="less" scoped>
.liner-text {
  padding: 20px;
  margin-top: 20px;
  font-family: PingFangSC-Regular;
  border-radius: 8px;
  font-size: 28px;
  color: #595959;
  background: #fafafa;
  letter-spacing: 0;
  line-height: 48px;
  font-weight: 400;
  position: relative;
  &-title {
    font-size: 32px;
    height: 44px;
    color: #262626;
    font-weight: 500;
    line-height: 44px;
    margin-bottom: 16px;
  }
  .desc {
    &-text {
      text-align: left;
    }
  }

  .clamp {
    max-height: 96px;
    overflow: hidden;
  }
  .right-desc {
    position: absolute;
    bottom: 20px;
    right: 0;
    display: flex;
    align-items: center;
    color: #3377ff;
    background: #fafafa;
  }
  .ell {
    padding-left: 20px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa 50%, #fafafa);
    color: rgba(0, 0, 0, 0.84);
  }
  .arrow {
    width: 96px;
    height: 48px;
    background: #fafafa;
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }
}
[theme-mode='black'] {
  .liner-text {
    color: rgba(255, 255, 255, 0.6);
    background: #212121;
    &-title {
      color: rgba(255, 255, 255, 0.84);
    }
    .right-desc {
      color: #3377ff;
      background: #212121;
    }
    .ell {
      color: rgba(255, 255, 255, 0.84);
      background-image: linear-gradient(to right, rgba(28, 28, 28, 0), #212121 50%, #212121);
    }
    .arrow {
      background: #212121;
    }
  }
}
</style>
